<template>
	<view class="ccontainer cflex_items">
		<view v-if="address.length == 0" class="address cflex cflex_row cflex_between cflex_items" @click="tapaddress">
			<view>填写收货地址</view>
			<image src="/static/clq-image/address-right.png" mode=""></image>
		</view>
		<view v-else class="address cflex cflex_row cflex_between cflex_items" v-for="value in address" >
			<view class="cflex cflex_col">
				<view class="cflex cflex_row">
					<view>{{value.people}}</view>
					<view style="color: #999;">{{value.phone}}</view>
				</view>
				<view>{{value.address}}</view>
			</view>
			<image src="/static/clq-image/address-right.png" mode=""></image>
		</view>
		<view class="detail cflex cflex_col">
			<view class="top cflex cflex_row">
				<image :src="image" mode=""></image>
				<view class="cflex cflex_col">
					<view class="againItem-name">{{goods.name}}</view>
					<view class="againItem-type_name">{{goods.type_name}}</view>
					<view class="againItem-factory_price">出厂价：{{goods.factory_price}}元</view>
					<view class="againItem-num">起订量：{{goods.num}}件</view>
				</view>
			</view>
			<view class="bottom cflex cflex_col">
				<view v-if="goods.shipping_method==1">运输方式：快递</view>
				<view v-if="goods.shipping_method==2">运输方式：整车运输</view>
				<view v-if="goods.shipping_method==3">运输方式：物流自提点</view>
				<view>运费：{{goods.shipping}}</view>
			</view>
		</view>
		<view class="address cflex cflex_row cflex_items">
			<view>备注</view>
			<input class="cflex cflex_1" type="text" v-model="remarks" placeholder="选填，请先和商家协商一致" @blur="inputText"/>
		</view>
		<view class="fixBlock cflex cflex_row cflex_right cflex_items">
			<view class="fixTip">共{{goods.order_num}}件</view>
			<view class="fixBtn cflex cflex_row cflex_center cflex_items" @click="addOrder">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	export default{
		data(){
			return{
				id:'',
				num:'',
				goods:[],
				address:[],
				image:'',
				remarks:'',
				address_id:''
			}
		},
		onLoad:function(opt){
			let that = this
			 //that.id = opt.id
			 //that.num = opt.num
			 that.id = 33
			 that.num = 110
			that.getDetail()
		},
		methods:{
			tapaddress(){
				let that=this
				uni.navigateTo({
					url:"/pages/addressForm/addressForm?id="+that.id+"&num="+that.num
				})
			},
			addOrder(){
				let that = this
				
			  	that.address_id=that.address[0].address_id
				
				uni.showLoading({
					title: "加载中"
				})
				ajax({
					url: 'order/addOrder',
					data: {
						token: uni.getStorageSync('token'),
						id: that.id,
						num:that.num,
						address_id:that.address_id,
						remarks:that.remarks
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
							uni.navigateTo({
								url:'/pages/orderList/orderList?type=1'
							})
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			},
			inputText(e){
				this.remarks=e.detail.value
			},
			getDetail(){
				let that = this
				uni.showLoading({
					title: "加载中"
				})
				ajax({
					url: 'order/buy',
					data: {
						token: uni.getStorageSync('token'),
						id: that.id,
						num:that.num
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						let result = res.data.data
						if (res.data.code == 1) {
							that.goods = result.goods
							that.address = result.address
							that.image = result.goods.images[0]
							console.log('goods', that.goods)
							console.log('address', that.address)
						} else if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						} else if (res.data.code == -1) {
							uni.reLaunch({
								url: '/pages/clq_login/clq_login'
							})
						} else if (res.data.code == -2) {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
	.ccontainer{
		padding: 0 20rpx;
	}
	.address{
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.address image{
		width: 12rpx;
		height: 20rpx;
	}
	.detail{
		width: 100%;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 22rpx 0;
		padding: 37rpx 0 27rpx 11rpx;
	}
	.top{
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #f7f7f7;
	}
	.top image{
		width: 149rpx;
		height: 149rpx;
		margin-right: 49rpx;
		border-radius: 12rpx;
	}
	.againItem-name{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.againItem-type_name{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
		margin: 5rpx 0 10rpx 0;
	}
	.againItem-factory_price{
		font-size: 24rpx;
		font-weight: 500;
		color: #D50000;
	}
	.againItem-num{
		font-size: 28rpx;
		font-weight: 500;
		color: #555555;
		margin-top: 5rpx;
	}
	.bottom{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
	}
	
	.address input{
		width: 100%;
		margin-left: 44rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
	.fixBlock{
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;
		background: #ffffff;
		box-shadow: 0px -5rpx 16rpx 8rpx rgba(177,177,177,0.27); 
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-right: 20rpx;
	}
	.fixTip{
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		margin-right: 80rpx;
	}
	.fixBtn{
		width: 170rpx;
		height: 56rpx;
		background: #ff7427;
		border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
	}
	
</style>
